<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>介绍网站</title>
    <style>
        body {
            overflow: hidden; /* 隐藏滚动条 */
            margin: 0;
            position: relative;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%; /* 让波浪的宽度大于屏幕 */
            height: 200%; /* 让波浪的高度大于屏幕 */
            background: 
                linear-gradient(180deg, rgba(0, 102, 204, 0.5) 20%, rgba(0, 153, 204, 0.4) 40%, rgba(0, 102, 204, 0.5) 60%, rgba(255, 127, 80, 0.3) 80%, rgba(255, 255, 255, 0) 100%);
            opacity: 0.6;
            animation: wave 10s infinite linear; /* 动画效果 */
            z-index: 0; /* 设置在背景层 */
        }

        @keyframes wave {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(10px); /* 中间向下移动 */
            }
            100% {
                transform: translateY(0);
            }
        }

        .content {
            background-color: white; /* 白色文本框 */
            color: black; /* 文本颜色为黑色 */
            padding: 40px; /* 增加内边距 */
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加文本框阴影 */
            max-width: 800px; /* 增加最大宽度 */
            text-align: center;
            position: relative; /* 用于绝对定位的子元素 */
            z-index: 1; /* 设置在前景层 */
        }

        .content h1, .content p {
            position: relative; /* 使阴影应用于文字 */
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
        }
        .copyright {
            position: fixed;
            bottom: 20px; /* 距离底部一定距离 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%); /* 确保完全居中 */
            color: white; /* 版权文本颜色 */
            font-size: 14px; /* 设置字体大小 */
            z-index: 1; /* 设置在前景层 */
        }

    </style>
</head>
<body>
    <div class="wave"></div>
    <div class="content">
        <h1>欢迎来到我们的介绍网站</h1>
        <p>我叫邱宜祯，我的github名称akdisnicndjsoxm 是欢迎来到我的介绍网站
        我的年龄12岁，在留隍第一中心小学读五年级。                                                                  
        Ok 介绍完毕！ 你可以访问我部署的其他网站：</p>
        <section id="个人网站">
            <p>个人网站: <a href="https://akdisnicndjsoxm.github.io/">https://akdisnicndjsoxm.github.io/</a></p>
        </section>
        <section id="about">
            <h2>井字棋</h2>
            <p>网站: <a href="https://akdisnicndjsoxm.github.io/jundiqis.io/">https://akdisnicndjsoxm.github.io/jundiqis.io/</a></p>
        </section>

        <section id="services">
            <h2>贪吃蛇</h2>
            <p>网站: <a href="https://akdisnicndjsoxm.github.io/skzkmkol.gitHub.io/">https://akdisnicndjsoxm.github.io/skzkmkol.gitHub.io/</a></p>
        </section>

        <section id="blog">
            <h2>我的博客</h2>
            <p>网站: <a href="https://akdisnicndjsoxm.github.io/akdisnic.github.io">https://akdisnicndjsoxm.github.io/akdisnic.github.io</a></p>
        </section>
        <img src="517fa05bc16349399135e61694924b69.gif" alt="GIF" width="300"> 
        
        <audio id="backgroundMusic" loop>
            <source src="只因你太美-SWIN#i1css.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
        
    </div>

    <script>
        // 自动播放音乐
        document.getElementById('background-music').play();
    </script>
    <div class="copyright">© 2024 akdisnicndjsoxm. 保留所有权利.</div>
</body>
</html>
